<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        body{
            display: flex;
            flex-direction: column;
        }
        #header{
            height: .4rem;
            background-color: red;
        }
        #content{
            flex: 1;
            position: relative;
            overflow-y: auto;
        }
        #header .headerbox {
            text-align: center;
            font-size: .16rem;
        }
        #header .headerbox a {
            font-size: .16rem;
            color: #333333;
            float: left;
        }
        #content .content-box div{
            display: flex;
            height:1.2rem ;
        }
        /* #content .content-box div>input{
            width: .15rem;
            height: .15rem;
            margin-top: .4rem;
        } */
        #content .content-box div>a{
            display: inline;
            height: 1rem;
            display: flex;
        }
        #content .content-box div>a img{
            width: .9rem;
            height: 0.9rem; 
        }
        #content .content-box div>a>div{
            width: .9rem;
            height: 0.9rem; 
            display: flex;
            flex-direction: column;
        }
        #content .content-box div>a>div>p{
            font-size: 0.16rem; 
            color: #333333;
            margin-left: .1rem;
        }
        #content .content-box div>a>span{
            font-size: .16rem;
            color:red;
            margin-left: 1rem;
        }
        #content .content-box>p{
            font-size: .2rem;
            color: red;
            position: absolute;
            bottom: 0;
            right: 0;
        }
        #footer {
            height: .5rem;
        }

        #footer .footer-box {
            height: .5rem;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        #footer .footer-box a {
            display: block;
            font-size: .2rem;
            color: #999999;
        }
    </style>
</head>
<body>
     <!-- header 开头 -->
     <div id="header">
        <div class="headerbox tou">
            <a href="">&lt;</a>
            收藏
        </div>
    </div>
    <!-- header end -->
    <!-- content 内容 -->
    <div id="content">
        <div class="content-box">
            <!-- <div>
                <a href="">
                    <img src="http://localhost/image/nav/nav1.jpg" alt="">
                    <div>
                        <p>漂亮的衣服</p>
                        <p>颜色：白色</p>
                        <p>尺码：xl</p>
                    </div>
                    <span>￥100</span>
                </a>
            </div>
            <div>
                <a href="">
                    <img src="http://localhost/image/nav/nav1.jpg" alt="">
                    <div>
                        <p>漂亮的衣服</p>
                        <p>颜色：白色</p>
                        <p>尺码：xl</p>
                    </div>
                    <span>￥100</span>
                </a>
            </div>
            <div>
                <a href="">
                    <img src="http://localhost/image/nav/nav1.jpg" alt="">
                    <div>
                        <p>漂亮的衣服</p>
                        <p>颜色：白色</p>
                        <p>尺码：xl</p>
                    </div>
                    <span>￥100</span>
                </a>
            </div> -->
            <p>结算：￥100</p>
        </div>
    </div>
    <!-- content end -->
    <!-- footer 开头-->
    <div id="footer">
        <div class="footer-box dibu">
            <a href="./index.html">首页</a>
            <a href="./rdian.html">热点</a>
            <a href="./shopping.html">购物车</a>
            <a href="./scang.html">收藏</a>
            <a href="./mycenter.html">我的</a>
        </div>
    </div>
    <!-- footer end -->
</body>
<script src="./js/scang.js"></script>
</html>